<template>
  <div class="comments">
    <myheader title="精彩评论">
      <span slot="left" class="iconfont iconjiantou2" @click="$router.back()"></span>
    </myheader>
    <div class="lists">
      <div class="item" v-for="value in commentList" :key="value.id">
        <div class="head">
          <img :src="value.user.head_img" alt />
          <div>
            <p>{{value.user.nickname}}</p>
            <span>2小时前</span>
          </div>
          <span @click="sendcomment(value)">回复</span>
        </div>
        <commentItem :parent="value.parent" v-if="value.parent"></commentItem>
        <div class="text">{{value.content}}</div>
      </div>
    </div>
    <myCommentFooter :post="article" :currentComment='comment' @refresh="refreshList"></myCommentFooter>
  </div>
</template>

<script>
import myheader from "@/components/myheader.vue";
import myCommentFooter from "@/components/myCommentFooter.vue";
import { getCommentList, getArticleDetail } from "@/apis/articles.js";
import myaxios from "@/utils/myaxios.js";
import commentItem from "@/components/commentItem.vue";
export default {
  data() {
    return {
      commentList: [],
      article: {},
      comment:{} // 当前需要传递给子组件的评论对象
    };
  },
  components: {
    myheader,
    commentItem,
    myCommentFooter,
  },
  methods: {
    // 发表评论
    sendcomment(value){
      console.log(value)
      // 将这个comment给子组件
      this.comment = value
    },
    refreshList() {
      this.init();
      // scrollTo:让页面滚动到指定的位置
      window.scrollTo(0,0)
    },
    async init() {
      // 获取当前文章的评论数据
      let res = await getCommentList(this.$route.params.id, {
        pageSize: 50,
        pageIndex: 1,
      });
      console.log(res);
      this.commentList = res.data.data.map((v) => {
        v.user.head_img = myaxios.defaults.baseURL + v.user.head_img;
        return v;
      });
      console.log(this.commentList);
      // 获取当前文章的详情数据
      let res2 = await getArticleDetail(this.$route.params.id);
      this.article = res2.data.data;
    },
  },
  async mounted() {
    this.init();
  },
};
</script>

<style lang='less' scoped>
.lists {
  border-top: 5px solid #ddd;
  padding: 0 15px;
  .item {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > img {
        width: 50/360 * 100vw;
        height: 50/360 * 100vw;
        display: block;
        border-radius: 50%;
      }
      > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        > span {
          font-size: 12px;
          color: #999;
          line-height: 25px;
        }
      }
      > span {
        color: #999;
        font-size: 13px;
      }
    }
    .text {
      font-size: 14px;
      color: #333;
      padding: 20px 0 10px 0;
    }
  }
}
</style>